import { Form, Input, Radio } from 'antd';
import React from 'react';
import {
  CONDITION_2,
  CONDITION_CUSTOM,
  CONDITION_TRUE,
  CONDITION_TYPE,
} from '@/pages/Transformer/settings';
import Expression from '@/pages/Transformer/components/Expression';
import ForMultipleValue from '@/pages/Transformer/components/ForMultipleValue';

function ConditionGroup({ value = {}, onChange, treeData = [] }) {
  const { type } = value;

  return (
    <>
      <Radio.Group
        value={type || CONDITION_TRUE}
        buttonStyle="solid"
        className="margin-z"
        style={{ display: 'block' }}
        onChange={e => onChange({ type: e.target.value })}
      >
        {CONDITION_TYPE.map(k => (
          <Radio key={k.value} value={k.value}>
            {k.title}
          </Radio>
        ))}
      </Radio.Group>
      {type === CONDITION_2 && (
        <Expression
          treeData={treeData}
          value={value}
          onChange={data => onChange({ type: CONDITION_2, ...data })}
        />
      )}

      {type === CONDITION_CUSTOM && (
        <ForMultipleValue
          treeData={treeData}
          custom={false}
          value={value}
          onChange={data => onChange({ type: CONDITION_CUSTOM, ...data })}
          placeholder={`表达式如：#code == 'A' && #type == 'B'，code和type均为变量，需要手动添加`}
        />
      )}
    </>
  );
}

export default ConditionGroup;
